在 Uni-app 中使用地图和定位功能，你可以利用 Uni-app 提供的原生组件和 API。以下是一个基本的指南，帮助你实现这些功能。

1. 地图组件

Uni-app 提供了 <map> 组件，可以用来嵌入地图。

示例代码

<template>
  <view>
    <map
      id="map"
      longitude="116.397428"
      latitude="39.90923"
      scale="15"
      markers="{{markers}}"
      show-location
      style="width: 100%; height: 500px;"
      @tap="onMapTap"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      markers: [
        {
          id: 1,
          latitude: 39.90923,
          longitude: 116.397428,
          title: 'Beijing'
        }
      ]
    };
  },
  methods: {
    onMapTap(e) {
      console.log('Map tapped:', e);
    }
  }
};
</script>

<style>
/* 样式可以根据需要进行调整 */
</style>

2. 定位功能

Uni-app 提供了 uni.getLocation API，可以用来获取用户当前的位置。

示例代码

<template>
  <view>
    <button @click="getLocation">Get Location</button>
    <view v-if="location">
      <text>Latitude: {{ location.latitude }}</text>
      <text>Longitude: {{ location.longitude }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      location: null
    };
  },
  methods: {
    getLocation() {
      uni.getLocation({
        type: 'gcj02', // 返回可以用于 `uni.openLocation` 的经纬度
        success: (res) => {
          this.location = res;
          console.log('Location:', res);
        },
        fail: (err) => {
          console.error('Failed to get location:', err);
        }
      });
    }
  }
};
</script>

<style>
/* 样式可以根据需要进行调整 */
</style>

3. 在地图上显示当前位置

结合地图组件和定位功能，你可以在地图上显示当前位置。

示例代码

<template>
  <view>
    <button @click="getLocation">Get Location</button>
    <map
      id="map"
      longitude="{{currentLongitude}}"
      latitude="{{currentLatitude}}"
      scale="15"
      markers="{{markers}}"
      show-location
      style="width: 100%; height: 500px;"
      @tap="onMapTap"
    ></map>
    <view v-if="location">
      <text>Latitude: {{ location.latitude }}</text>
      <text>Longitude: {{ location.longitude }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentLatitude: 39.90923, // 初始值，可以根据需要设置
      currentLongitude: 116.397428, // 初始值，可以根据需要设置
      location: null,
      markers: []
    };
  },
  methods: {
    getLocation() {
      uni.getLocation({
        type: 'gcj02', // 返回可以用于 `uni.openLocation` 的经纬度
        success: (res) => {
          this.location = res;
          this.currentLatitude = res.latitude;
          this.currentLongitude = res.longitude;
          this.markers = [
            {
              id: 1,
              latitude: res.latitude,
              longitude: res.longitude,
              title: 'Current Location'
            }
          ];
          console.log('Location:', res);
        },
        fail: (err) => {
          console.error('Failed to get location:', err);
        }
      });
    },
    onMapTap(e) {
      console.log('Map tapped:', e);
    }
  }
};
</script>

<style>
/* 样式可以根据需要进行调整 */
</style>

注意事项

1. 权限问题：在获取定位信息时，需要确保用户已经授予了定位权限。
2. 地图组件的样式：可以根据实际需求调整地图组件的样式，例如宽度和高度。
3. API 兼容性：确保你的 Uni-app 版本支持上述 API 和组件。

通过上述步骤，你应该能够在 Uni-app 中实现地图和定位功能。如果有更复杂的需求，可以参考 Uni-app 的官方文档和社区资源。